.bd-wrap {
    position: relative;
    display: inline-block;
    width: 100px;
    height: 100px;
    color: gold;
    --border-width: 2px;
    --animate-duratin: 1s;
    background-color: white;
}
.bd-color {
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    border-radius: 50%;
    border: var(--border-width) solid currentColor;
}
.bg-left {
    position: absolute;
    left: 0;
    top: 0;
    width: 50%;
    height: 100%;
    overflow: hidden;
}
.bg-right {
    position: absolute;
    right: 0;
    top: 0;
    width: 50%;
    height: 100%;
    overflow: hidden;
}
.bd-mask1 {
    position: relative;
    width: 100%;
    height: 100%;
    background: white;
    transform-origin: right center;
    animation: 0.25s linear 0s both leftCircle;
}
.bd-mask2 {
    width: 100%;
    height: 100%;
    background: white;
    transform-origin: left center;
    animation: 0.25s linear 0.25s both leftCircle;
}
@keyframes leftCircle {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(-180deg);
    }
}
.bg-check {
    position: absolute;
    left: 14%;
    bottom: 45%;
    z-index: 2;
    width: 40%;
    height: 55%;
    border: var(--border-width) solid transparent;
    border-right-color: currentColor;
    border-bottom-color: currentColor;
    transform: rotate(35deg);
    transform-origin: bottom left;
    animation: checkBig 0.5s linear 0s both;
}
@keyframes checkBig {
    from {
        width: 0;
        height: 0;
    }
    40% {
        width: 40%;
        height: 0;
    }
    to {
        width: 40%;
        height: 55%;
    }
}